<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/buttons.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<!--<table class="table table-bordered">
				<tbody>
					<tr>
						<td style="background-color: #4E8D34;text-align: center;border-color: black"><a href="intro.do" style="color: white">潇湘卡简介</a></td>
						<td style="text-align: center;border-color: black"><a href="use.do" style="color: black;text-align: center;" >使用须知</a></td>
						<td style="text-align: center;border-color: black"><a href="cooperation.do" style="color: black;text-align: center;">合作景区</a></td>
						<td style="text-align: center;border-color: black"><a href="jointly.do" style="color: black;text-align: center;">联名卡</a></td>
					</tr>
				</tbody>
	    	</table>-->
	    	<!--该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。-->
		   <div class="btn-toolbar" role="toolbar">
		    	<!--按钮组的大小:.btn-group-lg, .btn-group-sm, .btn-group-xs-->
		    	<div class="button-group btn-group-lg">
				    <button type="button" class="btn btn-success" id="10but" style="width: 165px;height: 50px;font-size: 22px;background-color: #4E8D34;" onclick="location='intro.do'">潇湘卡简介</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
				    <button type="button" class="btn btn-success" id="10but" style="width: 165px;height: 50px;font-size: 22px;background-color: #FFFFFF;color: #4E8D34;" onclick="location='use.do'">使用须知</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
				    <button type="button" class="btn btn-success" id="10but" style="width: 165px;height: 50px;font-size: 22px;background-color: #FFFFFF;color: #4E8D34;" onclick="location='cooperation.do'">合作景区</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
				    <button type="button" class="btn btn-success" id="10but" style="width: 165px;height: 50px;font-size: 22px;background-color: #FFFFFF;color: #4E8D34;" onclick="location='jointly.do'">联名卡</button>	          	       
		    		<div style="height: 50px;"></div>  
			    </div>
		    	<div class="button-group btn-group-sm">
				    <button type="button" class="btn btn-success" id="10but" style="width: 165px;height: 50px;font-size: 22px;background-color: #4E8D34;" onclick="location='intro.do'">潇湘卡简介</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
				    <button type="button" class="btn btn-success" id="10but" style="width: 165px;height: 50px;font-size: 22px;background-color: #FFFFFF;color: #4E8D34;" onclick="location='use.do'">使用须知</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
				    <button type="button" class="btn btn-success" id="10but" style="width: 165px;height: 50px;font-size: 22px;background-color: #FFFFFF;color: #4E8D34;" onclick="location='cooperation.do'">合作景区</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
				    <button type="button" class="btn btn-success" id="10but" style="width: 165px;height: 50px;font-size: 22px;background-color: #FFFFFF;color: #4E8D34;" onclick="location='jointly.do'">联名卡</button>	          	       
		    		<div style="height: 50px;"></div>  
			    </div>
		    </div>
		    
		    <div style="width: 100%;">
		    	<!--在一个按钮组内嵌套另一个按钮组,当让下拉菜单与一系列按钮组合使用时，就会用到这个。-->
			    <div class="btn-group">
				    <button type="button" class="btn btn-default">按钮 1</button>
				    <button type="button" class="btn btn-default">按钮 2</button>
				    <div class="btn-group">
					    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					        下拉
					        <span class="caret"></span>
					    </button>
					    <ul class="dropdown-menu">
					        <li><a href="#">下拉链接 1</a></li>
					        <li><a href="#">下拉链接 2</a></li>
					    </ul>
				    </div>
				</div>
				<!--.btn-group-vertical	该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。-->
				<div class="btn-group-vertical">
				    <button type="button" class="btn btn-default">按钮 1</button>
				    <button type="button" class="btn btn-default">按钮 2</button>
				    <div class="btn-group-vertical">
				    	<!--带有各种大小按钮的下拉菜单：.btn-large、.btn-sm 或 .btn-xs。-->
					    <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown">
					        下拉
					        <span class="caret"></span>
					    </button>
					    <ul class="dropdown-menu">
					        <li><a href="#">下拉链接 1</a></li>
					        <li><a href="#">下拉链接 2</a></li>
					    </ul>
				    </div>
				</div>
				<!--分割的按钮下拉菜单-->
				<!--.dropup 使菜单往上拉伸-->
				<div class="btn-group dropup">
				    <button type="button" class="btn btn-primary">原始</button>
				    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
				        <span class="caret"></span>
				        <span class="sr-only">切换下拉菜单</span>
				    </button>
				    <ul class="dropdown-menu" role="menu">
				        <li><a href="#">功能</a></li>
				        <li><a href="#">另一个功能</a></li>
				        <li><a href="#">其他</a></li>
				        <li class="divider"></li>
				        <li><a href="#">分离的链接</a></li>
				    </ul>
				</div>
				
		    </div>
			    
		</div>
	</body>
</html>
